<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-items</title>
    <style type="text/css">
        .box{
            display:flex ;
            height: 100px;
            width: 150px;
            border-radius: 5px;
            background-color: #eee;
        }
        .box div{
            margin: 5px;
            padding: 10px;
            border-radius: 5px;
            background-color: #aaa;
            text-align:center;
        }
        .box .d1{padding-top: 10px;}
        .box .d2{padding-top: 20px;}
        .box .d3{padding-top: 30px;}
        #div1{ align-items: flex-start;  }
        #div2{align-items: flex-end;}
        #div3{align-items: center;}
        #div4{align-items: baseline;}
        #div5{align-items: stretch;}
    </style>
</head>
<body>
<h2>flex-start</h2>
<div class="box" id="div1">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
</div>
<h2>flex-end</h2>
<div class="box" id="div2">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
</div>
<h2>center</h2>
<div class="box" id="div3">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
</div>
<h2>space-between</h2>
<div class="box" id="div4">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
</div>
<h2>space-around</h2>
<div class="box" id="div5">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
</div>
</body>
</html>